Page({
  data: {
    images: [
      '/pages/image/yang/sheep1.png',
      '/pages/image/yang/sheep2.png',
      '/pages/image/yang/sheep3.png',
      '/pages/image/yang/sheep4.png'
    ], // 图片路径数组
    layer1: [],  // 第一层（最下面）
    layer2: [],  // 第二层（中间）
    layer3: [],  // 第三层（最上面）
    selectedBlocks: [], // 卡槽中的图片
    score: 0,    // 分数
  },

  onLoad() {
    this.initGame();
  },

  // 初始化游戏
  initGame() {
    const layers = [[], [], []];
    const images = this.data.images;
    const layerWidth = 300;  // 图层区域的宽度
    const layerHeight = 400; // 图层区域的高度

    // 每层图片数量随机
    const layer1Count = Math.floor(Math.random() * 10) + 5; // 第一层 5-9 张
    const layer2Count = layer1Count+10; // 第二层与第一层数量相同
    const layer3Count = Math.floor(Math.random() * 10) + 8; // 第三层 2-4 张

    // 随机生成第一层图片（几乎平铺）
    this.createLayerImages(layers[0], layer1Count, images, layerWidth, layerHeight);

    // 第二层在第一层的基础上微调
    layers[1] = this.adjustLayerPositions(layers[0], 30); // 微调范围 10px

    // 第三层在第二层的基础上微调
    layers[2] = this.adjustLayerPositions(layers[1], 30); // 微调范围 10px

    this.setData({
      layer1: layers[0],
      layer2: layers[1],
      layer3: layers[2],
      score: 0,
      selectedBlocks: []  // 清空卡槽内容
    });
  },

  // 创建每一层的图片
  createLayerImages(layer, count, images, layerWidth, layerHeight) {
    for (let i = 0; i < count; i++) {
      const randomImage = images[Math.floor(Math.random() * images.length)];

      const block = {
        src: randomImage,
        left: Math.random() * (layerWidth - 160),  // 限制在图层区域内，80是图片宽度
        top: Math.random() * (layerHeight - 160),   // 限制在图层区域内，80是图片高度
      };
      layer.push(block);
    }
  },

  // 调整图层位置（在上一层的基础上微调）
  adjustLayerPositions(baseLayer, offsetRange) {
    return baseLayer.map(block => {
      return {
        ...block,
        left: block.left + (Math.random() * offsetRange * 2 - offsetRange), // 水平方向微调
        top: block.top + (Math.random() * offsetRange * 2 - offsetRange),   // 垂直方向微调
      };
    });
  },

  // 方块点击事件
  onBlockTap(e) {
    const { index, layer } = e.currentTarget.dataset;
    let selectedLayer = this.data[layer];
    const clickedBlock = selectedLayer[index];

    // 检查是否被遮挡
    if (this.isBlocked(clickedBlock)) {
      wx.showToast({
        title: '该图片被遮挡，无法点击！',
        icon: 'none',
      });
      return;  // 被遮挡，不能点击
    }

    // 更新已选中图片到卡槽
    const selectedBlocks = this.data.selectedBlocks.concat(clickedBlock);

    // 按图片名称排序（sheep1.jpg 在最左边）
    selectedBlocks.sort((a, b) => a.src.localeCompare(b.src));

    // 更新相应的层
    selectedLayer.splice(index, 1);

    // 更新卡槽中的图片
    this.setData({
      selectedBlocks: selectedBlocks,
      [layer]: selectedLayer,
    });

    // 检查卡槽中是否有三个相同的图片
    this.checkForMatch(selectedBlocks);
    
    // 更新分数
    this.setData({
      score: this.data.score + 10,  // 每点击一个方块得10分
    });
  },

  // 判断是否被遮挡（仅检查正上方）
  isBlocked(clickedBlock) {
    // 检查所有层（包括当前层）
    const layersToCheck = [this.data.layer1, this.data.layer2, this.data.layer3];
    for (let layer of layersToCheck) {
      for (let block of layer) {
        // 检查是否在当前图片的正上方
        if (block.top <= clickedBlock.top) continue; // 如果其他图片的底部在当前图片的顶部下方，跳过
        // 检查水平方向是否有重叠
        if (
          clickedBlock.left < block.left + 80 && // 当前图片的左侧在其他图片的右侧
          clickedBlock.left + 80 > block.left    // 当前图片的右侧在其他图片的左侧
        ) {
          // 如果有重叠，表示被遮挡
          return true;
        }
      }
    }
    // 没有任何遮挡
    return false;
  },

  // 检查卡槽中是否有三个相同的图片
  checkForMatch(selectedBlocks) {
    const countMap = {};

    // 统计每种图片的数量
    selectedBlocks.forEach(block => {
      countMap[block.src] = (countMap[block.src] || 0) + 1;
    });

    // 查找是否有三个相同的图片
    for (let src in countMap) {
      if (countMap[src] === 3) {
        // 找到匹配的图片，执行消除
        this.removeMatchingBlocks(src);
      }
    }
  },

  // 从卡槽中删除匹配的图片
  removeMatchingBlocks(src) {
    const selectedBlocks = this.data.selectedBlocks.filter(block => block.src !== src);

    // 更新卡槽中的图片
    this.setData({
      selectedBlocks: selectedBlocks,
      score: this.data.score + 30, // 消除匹配后得分
    });
  },

  // 重新开始游戏
  resetGame() {
    this.initGame();
  }
});